import React, { useRef } from "react";

/*
  目标: useRef

  1 获取dom的对象
  2 获取组件的实例
    1 函数组件 不能直接使用 ref 会报错， 想要拿请你使用  React.forwardRef()
      1 以前 用类组件  身上可以直接 使用ref 
      2 原因是因为 类组件 有实例 this，ref 直接在this上去挂载  但是函数组件没有实例 没有自己状态
  3 难点！！保存不需要渲染的数据

  步骤: 
    1 React.forwardRef() 把你的函数组件 包起来即可
    2 React.forwardRef()  里面包装的函数组件 可以接收两个参数  分别是  props，ref

*/
export default function App() {
  const ref = useRef(null);
  return (
    <>
      <div>
        <button onClick={() => console.log(ref)}>获取子组件的实例</button>
        <Btn a={1} b={2} ref={ref}></Btn>
      </div>
    </>
  );
}

const Btn = React.forwardRef(function (props, ref) {
  // console.log(props);
  // 给 ref.current 指定了某一个值，父组件获取到底ref就是什么值
  // ref.current = "讨厌";
  return (
    <div>
      <button>这个是组件1</button>
      <button>这个是组件2</button>
      {/* 父组件拿到的子组件的ref 就是 button3 */}
      <button ref={ref}>这个是组件3</button>
      <button>这个是组件4</button>
    </div>
  );
});

// class Btn extends React.Component {
//   render() {
//     return <button>类组件</button>;
//   }
// }
